<template>
  <div class="qq">
    <transition name="login">
      <qq-login v-if="!isLogin" @login="handleLogin" />
    </transition>
    <transition name="list">
      <qq-list v-if="isLogin" />
    </transition>
  </div>
</template>

<script setup lang="ts">
import QqLogin from '@/components/systemWindow/qq/qqLogin.vue'
import QqList from '@/components/systemWindow/qq/qqList.vue'
import { inject, ref } from 'vue'
import { useRunningTasksStore } from '@/stores/taskBar/runningTasks'
import { useDeskAppStore } from '@/stores/systemApp/deskApp'

const appId = inject<string>('appId')
const taskId = inject<string>('taskId')
const componentData = inject<{ [key: string]: unknown }>('componentData')

const runningTasksStore = useRunningTasksStore()
const deskAppStore = useDeskAppStore()

const isLogin = ref(!!componentData?.isLogin)

const handleLogin = () => {
  isLogin.value = true
  const qq = deskAppStore.$state.deskAppList.find((item) => item.appId === 'QQ')
  if (qq && appId && taskId) {
    const size = qq.size?.['list'] || []
    const x = ((innerWidth - size[0]) * 4) / 5
    const y = 0
    runningTasksStore.setTaskPatch(appId, taskId, {
      x,
      y,
      endX: x,
      endY: y,
      width: size[0],
      height: size[1],
      minSize: [size[2], size[3]],
      maxSize: [size[4], size[5]],
      isTaskBar: false,
      trayIcon: qq.trayIcon[1],
      isResize: size[size.length - 1] !== 0,
      componentData: {
        isLogin: true
      }
    })
  }
}
</script>

<style scoped lang="scss">
.qq {
  width: 100%;
  height: 100%;
}
</style>
